<template>
	<view class="container">
	        <view class="weui-search-bar">
	            <view class="weui-search-bar__form">
	            <!-- 搜索框 -->
	                <view class="weui-search-bar__box">
	                    <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
	                    <input @click="searchContent()" type="text" disabled="true" class="weui-search-bar__input" v-model="context" placeholder="请输入搜索内容"/>
	                </view>
	            </view>
	            <!-- 搜索按钮,调用搜索查询方法 -->
	            <view class="weui-search-bar__cancel-btn" @click="searchContent()">搜索</view>
	        </view>
	    </view>
</template>

<script>
	export default {
		
		name:"search",
		data() {
			return {
				context:''
			};
		},
		methods:{
			searchContent(){
				console.log(this.context)
				this.$emit('searchBack',{"context":this.context});//
			}
		}
	}
</script>

<style lang="less">
	.container {
	   width: 100%;
	}
  .weui-search-bar {
  
    padding: 8px 10px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    box-sizing: border-box;
    background-color: #EFEFF4;
    border-top: 1rpx solid #D7D6DC;
    border-bottom: 1rpx solid #D7D6DC;
  }
  .weui-icon-search_in-box {
    position: absolute;
    left: 10px;
    top: 7px;
  }
  .weui-search-bar__form {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: auto;
            flex: auto;
    border-radius: 5px;
    background: #FFFFFF;
    border: 1rpx solid #E6E6EA;
  }
  .weui-search-bar__box {
    position: relative;
    padding-left: 30px;
    padding-right: 30px;
    width: 100%;
    box-sizing: border-box;
    z-index: 1;
  }
  .weui-search-bar__input {
    height: 28px;
    line-height: 28px;
    font-size: 14px;
  }
  .weui-search-bar__cancel-btn {
    margin-left: 10px;
    line-height: 28px;
    color: #09BB07;
    white-space: nowrap;
  }

  
</style>
